<template>
	<div style="height: 100%;">
		<MkDragSplitPanel leftWidth="300px" style="height: 100%;">
			<template #left>
				<ListShenQing @dblclick="getShenQing" />
			</template>
			<template #right>
				<div style="height: 100%; overflow: auto;">
					<MkShenQingDan ref="shenQingDanRef" isEdit @loadFinished="getShenQingDanCallBack" />
					<a-tabs v-model:activeKey="ctx.tabActiveName" type="editable-card" @edit="onEdit" @change="tabChange">
						<a-tab-pane tab="总览" key="dashboard" :closable="false">
							<Dashboard :peiFaXueInfo="ctx.peiFaXueInfo" v-loading="ctx.loading" @add="addTab" @check="gotoTab" />
						</a-tab-pane>
						<a-tab-pane v-for="(item, index) in ctx.tabList" :tab="item.name" :key="item.key" :closable="false">
							<TraXueXingFuHe :shenQingDanInfo="ctx.shenQingDanInfo" :ref="`${item.key}`"
								@submitCallBack="(id) => submitTabChange(id, 'xxfh')" v-if="item.type == '血型复核'" />
							<TraJiaoChaPeiXue :shenQingDanInfo="ctx.shenQingDanInfo" :ref="`${item.key}`" :key="item.key"
								@submitCallBack="(id) => submitTabChange(id, 'jcpx')" v-else-if="item.type == '交叉配血'" />
							<TraLinChuangFaXue :shenQingDanInfo="ctx.shenQingDanInfo" :ref="`${item.key}`"
								@submitCallBack="(id) => submitTabChange(id, 'lcfx')" v-else-if="item.type == '临床发血'" />
						</a-tab-pane>
					</a-tabs>
				</div>
			</template>
		</MkDragSplitPanel>
	</div>
</template>

<script setup lang="ts" name="traPeiFaXue">
import ListShenQing from './listShenQing.vue';
import Dashboard from './dashboard.vue';
import TraLinChuangFaXue from '/@/views/tra/traLinChuangFaXue/index.vue';
import TraJiaoChaPeiXue from '/@/views/tra/traJiaoChaPeiXue/index.vue';
import TraXueXingFuHe from '/@/views/tra/traXueXingFuHe/index.vue';
import { useTraPeiFaXue } from './index'
const instance = getCurrentInstance()
// 导入迁移至index.ts的变量和方法
const {
	shenQingDanRef,
	ctx,
	onEdit,
	getShenQing,
	getShenQingDanCallBack,
	tabChange,
	addTab,
	gotoTab,
	submitTabChange
} = useTraPeiFaXue(instance);
</script>

<style lang='scss' scoped>
:deep(.ant-tabs-nav) {
	margin: 0px;
}

:deep(.el-tabs__header) {
	margin: 0px;
}

:deep(.el-tabs--card > .el-tabs__header .el-tabs__item.is-active) {
	background-color: #EDD7D7;
}
</style>